<!--
 * @Descripttion: 换房
 * @version: 1.0
 * @Author: 狸猫
 * @Date: 2023-11-25 14:29:36
 * @LastEditors: 赛罗
 * @LastEditTime: 2024-05-28 10:13:16
-->
<template>
  <div class="content">
    <el-dialog :title="title" :visible.sync="visible" width="800px" append-to-body>
      <el-descriptions title="租住信息" :column="2">
        <el-descriptions-item label="房源">{{
            form.premisesAddress
          }}
        </el-descriptions-item>
        <el-descriptions-item label="租住周期" :column="2">
          {{ form.checkInTime | formatDate('YYYY-MM-DD') }}至{{ form.checkOutTime | formatDate('YYYY-MM-DD') }}
        </el-descriptions-item>
      </el-descriptions>
      <el-form :model="form" ref="form" label-width="120px">
        <el-descriptions title="换房信息"></el-descriptions>
        <el-form-item label="换后房间" prop="changeHouseId" :rules="[
          { required: true, message: '请选择房屋', trigger: 'change' },
        ]"
        >
          <el-input style="width: 300px; margin-left: 10px" v-model="form.changePremisesAddress"
                    placeholder="请选择房屋"
                    readonly
          ></el-input>
          <el-button size="medium" type="primary" icon="el-icon-s-home"
                     @click="dialogSelectHouseVisible = true"
          >选择房屋
          </el-button>
        </el-form-item>
        <el-form-item label="换房日期" prop="realityCheckOutTime" :rules="[
          { required: true, message: '请选择换房日期', trigger: 'change' },
        ]"
        >
          <el-date-picker v-model="form.realityCheckOutTime" value-format="yyyy-MM-dd HH:ss:mm" type="date"
                          placeholder="选择日期" :picker-options="pickerOptions" @change="changeRealityCheckOutTime"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="换房后租住" required>
          <el-row>
            <el-col :span="11">
              <el-form-item label="" prop="changeCheckInTime">
                <el-date-picker style="width: 100%;" v-model="form.changeCheckInTime" value-format="yyyy-MM-dd HH:mm:ss"
                                type="date"
                                placeholder="开始日期" :picker-options="checkInOptions" disabled
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="2" style="text-align: center;line-height: 36px;">至</el-col>
            <el-col :span="11">
              <el-form-item label="" prop="changeCheckOutTime">
                <el-date-picker style="width: 100%;" v-model="form.changeCheckOutTime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="date"
                                placeholder="结算日期" :picker-options="checkOutOptions" disabled
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="承租人/企业" required>
          <el-input v-model="form.orderLessee.lesseeName" placeholder="请输入承租人/企业" style="width: 240px;"
                    disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="联系方式" required>
          <el-input v-model="form.orderLessee.phone" placeholder="请输入联系方式" style="width: 240px;" disabled
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
<!--    <SelectHouse v-model="dialogSelectHouseVisible" @success="selectHouseCb"/>-->
    <SelectHouse
      v-model="dialogSelectHouseVisible"
      @success="selectHouseCb"
      :orderParams="{checkInTime: form.checkInTime, checkOutTime: form.checkOutTime,orderType:'1',orderId: data.orderId}"
    />
  </div>
</template>
<script>
import { exchangeHouse, getOrderInfo } from '@/api/order/order'
// import SelectHouse from '@/views/long-short-rent/contract/list/components/select-house.vue'
import SelectHouse from '@/views/long-short-rent/order/component/select-house.vue'
import { compareDate, getDate } from '@/utils/common/moment'

export default {
  name: 'changeHouse',
  components: {
    SelectHouse
  },
  props: {
    value:{
      default: false
    },
    orderId: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      dialogSelectHouseVisible: false,
      title: '换房',
      form: {
        orderId: '1',
        houseId: '',
        realityCheckOutTime: null,
        orderLessee: {},
        changeCheckInTime: '',
        changeCheckOutTime: '',
        changeHouseId: ''
      },
      pickerOptions: {
        disabledDate: (time) => {
          // return time.getTime() < new Date(this.form.checkInTime) || time.getTime() >= new Date(this.form.checkOutTime)
          return compareDate(time,this.form.checkInTime,'<') || compareDate(time,this.form.checkOutTime,'>=')
        }
      },
      checkInOptions: {
        disabledDate: (time) => {
          // return time.getTime() < new Date(this.form.checkInTime).getTime() || time.getTime() > new Date(this.form.checkOutTime).getTime()
          return compareDate(time,this.form.checkInTime,'<') || compareDate(time,this.form.checkOutTime,'>')
        }
      },
      checkOutOptions: {
        disabledDate: (time) => {
          // return time.getTime() <= new Date(this.form.checkInTime).getTime()
          return compareDate(time,this.form.checkInTime,'<=')
        }
      }
    }
  },
  computed: {
    visible:{
      get(){
        return this.value
      },
      set(val){
        this.$emit('input', val)
      }
    },
    customHouseName: {
      get() {
        return this.form.houseId
          ? this.form.estateName +
          this.form.buildingName +
          '栋' +
          this.form.unitName +
          '单元' +
          this.form.roomNumber +
          '房'
          : ''
      },
      set() {
      }
    }
  },
  watch: {
    value:{
      handler(val){
        if(val){
          this.getInfo()
        }
      },
      immediate: true
    },
    'form.realityCheckOutTime': {
      handler(val) {
        this.form.changeCheckInTime = getDate(val, 1,'YYYY-MM-DD 00:00:00')
      }
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    changeRealityCheckOutTime() {
      this.form.changeCheckInTime = getDate(this.form.realityCheckOutTime, 1,'YYYY-MM-DD 00:00:00')
    },
    //获取详情
    getInfo() {
      if (!this.orderId) return
      getOrderInfo(this.orderId).then((response) => {
        this.form = response.data

        this.form['realityCheckOutTime'] = this.formatDate(new Date(), 'YYYY-MM-DD 00:00:00')
        this.form['changeCheckInTime'] = getDate(this.form['realityCheckOutTime'], 1,'YYYY-MM-DD 00:00:00')
        this.form['changeCheckOutTime'] = this.form.checkOutTime
      })
    },
    //房间选择回调
    selectHouseCb(data) {
      let houseObj = {
        changeHouseId: data.houseId, //房屋id
        changePremisesAddress: data.premisesAddress //小区地址
      }
      this.form = { ...this.form, ...houseObj }
    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.houseId == this.form.changeHouseId) {
            this.$message.error('更换的房间与原房间相同')
            return
          }

          // V5.3后无需跳转至签约
          // this.$emit("submit", {
          //   changeHouseId: this.form.changeHouseId, //房屋id
          //   changePremisesAddress: this.form.changePremisesAddress,
          //   realityCheckOutTime: this.form.realityCheckOutTime,
          // });

          // V5.3后无需跳转至签约
          let params = {
            orderId: this.form.orderId,
            houseId: this.form.houseId, //房屋id
            premisesAddress: this.form.premisesAddress,
            changeDate: this.form.realityCheckOutTime,
            checkInTime: this.form.checkInTime,
            checkOutTime: this.form.checkOutTime,
            orderLessee: this.form.orderLessee,
            order: {
              houseId: this.form.changeHouseId,
              reserveUser: this.form.orderLessee.lesseeName,
              reserveUserPhone: this.form.orderLessee.phone,
              checkInTime: this.form.changeCheckInTime,
              checkOutTime: this.form.changeCheckOutTime,
              orderSource: this.form.orderSource,
              premisesAddress: this.form.changePremisesAddress
            }
          }
          console.log('params', params)
          exchangeHouse(params).then((response) => {
            this.$message.success(response.msg)
            this.$emit('success')
            this.close()
          })
        }
      })
    },
    close() {
      this.visible = false
    }
  }
}
</script>
<style lang="scss" scoped></style>
